import { Typography, Skeleton, Row, Col } from "@douyinfe/semi-ui";
import swr from "../utils/swr";
import Page from "../utils/page";
import {
  IconArticle,
  IconUserGroup,
  IconHistogram,
} from "@douyinfe/semi-icons";
import { Card } from "@nextui-org/react";
import { useRouter } from "next/router";

export default function Home() {
  const { Title, Text } = Typography;
  const router = useRouter();
  return (
    <Page page="/">
      <div
        style={{
          margin: "1rem",
        }}
      >
        <Card bordered css={{ m: 10, w: "auto" }}>
          <Title heading={5}>公告</Title>
          <br />
          {(() => {
            const { data, isLoading, isError } = swr("/notice");
            if (isLoading)
              return (
                <Skeleton
                  placeholder={<Skeleton.Paragraph rows={2} />}
                ></Skeleton>
              );
            if (isError) return <Text>获取公告失败</Text>;
            return <Text>{data}</Text>;
          })()}
        </Card>
        <Row>
          <Col span={12}>
            <Card
              clickable
              bordered
              css={{ m: 10, w: "auto" }}
              onClick={() => {
                router.push("/exams");
              }}
            >
              <Title heading={6} icon={<IconArticle size="large" />}>
                考试列表 &gt;
              </Title>
            </Card>
          </Col>
          <Col span={12}>
            <Card
              clickable
              bordered
              css={{ m: 10, w: "auto" }}
              onClick={() => {
                router.push("/students");
              }}
            >
              <Title heading={6} icon={<IconUserGroup size="large" />}>
                学生列表 &gt;
              </Title>
            </Card>
          </Col>
          <Col span={12}>
            <Card
              clickable
              bordered
              css={{ m: 10, w: "auto" }}
              onClick={() => {
                router.push("/teachers");
              }}
            >
              <Title heading={6} icon={<IconUserGroup size="large" />}>
                教师列表 &gt;
              </Title>
            </Card>
          </Col>
          <Col span={12}>
            <Card
              clickable
              bordered
              css={{ m: 10, w: "auto" }}
              onClick={() => {
                router.push("/statistics");
              }}
            >
              <Title heading={6} icon={<IconHistogram size="large" />}>
                统计数据 &gt;
              </Title>
            </Card>
          </Col>
        </Row>
      </div>
    </Page>
  );
}
